<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript测试</title>
</head>
<body>
    <h1>JavaScript控制台测试</h1>
    <button onclick="runTest()">运行测试</button>
    <div id="output"></div>

    <script>
        function runTest() {
            console.log('=== JavaScript测试开始 ===');
            
            // 模拟从后端获取的数据
            const mockData = {
                success: true,
                tables: [
                    {
                        name: 'users',
                        columns: [
                            {name: 'id', type: 'INTEGER', nullable: false, primary_key: true},
                            {name: 'username', type: 'VARCHAR(50)', nullable: false, primary_key: false}
                        ]
                    },
                    {
                        name: 'products', 
                        columns: [
                            {name: 'id', type: 'INTEGER', nullable: false, primary_key: true},
                            {name: 'name', type: 'VARCHAR(100)', nullable: false, primary_key: false}
                        ]
                    }
                ],
                relationships: [
                    {
                        from_table: 'products',
                        from_column: 'category_id',
                        to_table: 'categories',
                        to_column: 'id'
                    }
                ]
            };
            
            console.log('模拟数据:', mockData);
            console.log('表数量:', mockData.tables.length);
            console.log('关系数量:', mockData.relationships.length);
            
            // 测试原始主页面中的逻辑
            if (!mockData.tables || mockData.tables.length === 0) {
                console.error('❌ 没有表数据');
                document.getElementById('output').innerHTML = '<p style="color: red;">错误: 没有表数据</p>';
                return;
            }
            
            console.log('✅ 表数据检查通过');
            
            // 测试drawERDiagram函数
            try {
                console.log('测试drawERDiagram函数...');
                
                // 模拟一些D3.js相关变量
                const width = 800;
                const height = 600;
                const tables = mockData.tables;
                const relationships = mockData.relationships;
                
                console.log('准备绘制ER图...');
                console.log('宽度:', width);
                console.log('高度:', height);
                console.log('表数量:', tables.length);
                console.log('关系数量:', relationships.length);
                
                // 模拟节点位置计算
                const nodes = tables.map((table, i) => ({
                    id: table.name,
                    name: table.name,
                    columns: table.columns,
                    x: 100 + (i % 3) * 250,
                    y: 100 + Math.floor(i / 3) * 200
                }));
                
                console.log('节点位置:', nodes);
                
                document.getElementById('output').innerHTML = `
                    <h3 style="color: green;">✅ JavaScript测试通过!</h3>
                    <p>成功处理 ${tables.length} 个表</p>
                    <p>成功处理 ${relationships.length} 个关系</p>
                    <p>节点位置已计算: ${nodes.length} 个</p>
                `;
                
                console.log('=== JavaScript测试完成 ===');
                
            } catch (error) {
                console.error('❌ drawERDiagram测试失败:', error);
                document.getElementById('output').innerHTML = `<p style="color: red;">错误: ${error.message}</p>`;
            }
        }
        
        // 页面加载时自动运行
        window.onload = function() {
            console.log('页面加载完成');
            console.log('浏览器信息:', navigator.userAgent);
        };
    </script>
</body>
</html>